<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南方后街</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<title>Share南方</title>
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo a,#header_holder,.menu_information,.menu_setup,.menu_loginout,#nav,.nav_book,.nav_book:hover,.nav_digital,.nav_daily,.nav_jobs');
</script>
<![endif]-->
<script language="javascript">
	function selectTag(showContent,height1,height2,selfObj){
		var tag1 = document.getElementById("person_info");
		var tag2 = document.getElementById("person_release");
		var tag3 = document.getElementById("person_chheadimg");
		var tag4 = document.getElementById("person_chpsd");
		var tag5 = document.getElementById("person_chinfo");
		var sel1 = document.getElementById("selinfo");
		var sel2 = document.getElementById("selrelease");
		var sel3 = document.getElementById("selheadimg");
		var sel4 = document.getElementById("selchpsd");						
		var node = document.getElementById("person_content")
		var node2 = document.getElementById("person_left");
		var node3 = document.getElementById(selfObj);
		node.style.height=height1;
		node2.style.height=height2;
		tag1.style.display="none";
		tag2.style.display="none";
		tag3.style.display="none";
		tag4.style.display="none";
		tag5.style.display="none";
		sel1.style.backgroundColor="#fff";
		sel2.style.backgroundColor="#fff";
		sel3.style.backgroundColor="#fff";
		sel4.style.backgroundColor="#fff";			
		sel1.style.color="#656565";
		sel2.style.color="#656565";
		sel3.style.color="#656565";
		sel4.style.color="#656565";		
		node3.style.backgroundColor="#656565";
		node3.style.color="#fff";
		document.getElementById(showContent).style.display = "block";		
		}		
	function myshow(dnode)
	{
		dnode.style.border ="3px solid #009735";
		var a = dnode.getElementsByTagName("li").item(1).getElementsByTagName("a");
		for(var i=0;i<a.length;i++)
		{
		a[i].style.color = "#658a15";
		}
	} 
	function myhide(dnode)
	{ 
		dnode.style.border ="3px solid #fff";
		var a = dnode.getElementsByTagName("li").item(1).getElementsByTagName("a");
		for(var i=0;i<a.length;i++)
		{
		a[i].style.color = "#fff";
		}
	}
	window.onload=function(){
      selectTag('person_release','1054px','885px','selrelease');
     }
	 function clp(){
		return  $("#File").click();
	}	
	//验证密码格式是否正确
	function checkPassword( password ){
		regExp = new RegExp(/^[a-zA-Z0-9-_]{6,30}$/);
		if( password.match(regExp) != null  ){
			return true ;
		}else{
			return false ;
		}
	} 	
	//验证邮箱格式是否正确
	function checkEmail( email ){
		regExp = new RegExp(/^[a-zA-Z0-9]{5,15}@[a-zA-Z0-9]{2,10}[.](com|net)$/);
		if( email.match(regExp) != null  ){
			return true ;
		}else{
			return false ;
		}
	}
	// 验证电话号码格式是否正确
	function checkTelphone( telPhone ){
		regExp = new RegExp(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/);
		if( telPhone.match(regExp) != null  ){
			return true ;
		}else{
			return false ;
		}
	}
	
	// 验证用户名格式是否正确
	function checkUsername( username ){
		regExp = new RegExp(/^[a-zA-Z0-9-_]{5,30}$/);
		if( username.match(regExp) != null  ){
			return true ;
		}else{
			return false ;
		}
	} 

$(function(){
	// 添加验证方法 (密码)	
	jQuery.validator.addMethod("isPassword", function(value, element) {   
		return this.optional(element) || checkPassword(value);   
	}, " * 请正确输入6-30位的密码"); 
	
	//添加验证方法 (用户名)
	jQuery.validator.addMethod("isUsername", function(value, element) {   
		return this.optional(element) || checkUsername(value);   
	}, " * 请正确输入5-30位的用户名"); 
	
	// 添加验证方法 (邮箱地址)
	jQuery.validator.addMethod("isEmail", function(value, element) {   
		return this.optional(element) || checkEmail(value);   
	}, " * 请正确输入邮箱地址"); 
	
	// 添加验证方法 (手机号码)
	jQuery.validator.addMethod("isTelphone", function(value, element) {   
		return this.optional(element) || checkTelphone(value);   
	}, " * 请正确输入手机号码"); 
 	
    $("#chpsd").validate({
    	rules: {
			currentpsd:{
				required:true,
				isPassword:true		 
			},		
			newpsd:{
				required:true,
				isPassword:true		 
			},	
			agnpsd: {
				required: true,
				equalTo: "#newpsd"
			}
		},
		messages: {
			currentpsd:{
				required:" * 请输入当前密码"
			} ,
			newpsd:{
				required:" * 请输入新密码"
			} ,
			agnpsd: {
				required: " * 请输入确认密码",
				equalTo: " * 两次输入密码不一致"
			}
		},
    	//当验证错误时候在指定的区域内显示错误提示
        errorPlacement: function (lable, element){	
             var replacement = element.parent().find("span");
             var hidden = element.parent().find("font");
             lable.appendTo(replacement);
             hidden.hide();
        },
        //当验证正确的时候删除提示内容
        success: function (replacement){
        	replacement.val("");
        	replacement.parent().find("font").show();
        },
		submitHandler: function(form){
        	 var formValue = $("#chpsd").serialize();
    		 $.ajax({
    		    type: "POST",
    		    cache: false,
    		    url:"/registering",
    		    data:formValue,
    		    success: function(msg){
    		 		var obj = $.parseJSON( msg );
    				if( "200" == obj.responseCode )  {
    					window.location.href = "";
    				}else{
    					alert(obj.info);
    				}
    		    }
    		  });
		}
    });
	
	$("#chinfo").validate({
    	rules: {
			username:{
				required:true,
				isUsername:true		 
			},		
			nickname:{
				required:true,
				isUsername:true		 
			},	
			phone: {
				required: true,
				isTelphone:true	
			},	
			mail: {
				required: true,
				isEmail:true	
			}
		},
		messages: {
			username:{
				required:" * 请输入用户名"
			},
			nickname:{
				required:" * 请输入昵称"
			},
			phone: {
				required: " * 请输入手机号码"
			},
			mail: {
				required: " * 请输入邮箱"
			}
		},
    	//当验证错误时候在指定的区域内显示错误提示
        errorPlacement: function (lable, element){	
             var replacement = element.parent().find("span");
             var hidden = element.parent().find("font");
             lable.appendTo(replacement);
             hidden.hide();
        },
        //当验证正确的时候删除提示内容
        success: function (replacement){
        	replacement.val("");
        	replacement.parent().find("font").show();
        },
		submitHandler: function(form){
        	 var formValue = $("#chinfo").serialize();
    		 $.ajax({
    		    type: "POST",
    		    cache: false,
    		    url:"/registering",
    		    data:formValue,
    		    success: function(msg){
    		 		var obj = $.parseJSON( msg );
    				if( "200" == obj.responseCode )  {
    					window.location.href = "";
    				}else{
    					alert(obj.info);
    				}
    		    }
    		  });
		}
    });
});
</script>
</head>

<body>
<div id="top_holder">
    <div id="header_holder">
        <div id="header">
            <div id="logo"><a href="#">南方后街</a></div>
            <div id="menu">
                <ul>
                    <li><a href="#">交易平台</a></li>
                    <li><a href="#">捐赠平台</a></li>
                    <li><a href="#">校园信息</a></li>
                    <li><a href="#" class="menu_information">消息</a></li>
                    <li><a href="#" class="menu_setup">设置</a></li>
                    <li><a href="#" class="menu_loginout">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="nav_layout">
    	<div id="avatar"></div>
        <div id="search_layout">
            <form id="searchForm" action="" >
                <input name="search" type="text" class="search_input" />
                <button class="search_btn" type="submit"><i class="search_icon"></i></button>
            </form>
        </div>
        <div id="nav">
            <a href="#" class="nav_jobs">招聘信息</a>
            <a href="#" class="nav_daily">日常用品</a>
            <a href="#" class="nav_digital">数码产品</a>
            <a href="#" class="nav_book">二手图书</a>
        </div>
    </div>
</div>		
<!-- 中部 -->
<div class="person_content_holder">
	<div id="person_content">
			<!-- 上部分 -->
			<div class="person_top">					
				<div class="person_top_img"><img src="images/person.png" style="vspace:8px;"/></div>
				<div class="person_top_cha">个人信息中心</div>
			</div>	
			<div class="person_btm_holder">
				<!-- 左部分 -->
				<div id="person_left">
					<div class="person_left_img"></div>					
					<div class="person_left_name">				
						<b>用户名</b>	
					</div>			
					<div class="person_left_nav">
						<ul>
							<li onclick="selectTag('person_info','980px','805px','selinfo')"><a id="selinfo" href="javascript:void(0)">个人信息<span class="padding1"></span></a></li>
							<li onclick="selectTag('person_release','1054px','885px','selrelease')"><a id="selrelease" href="javascript:void(0)">发布信息<span class="padding1"></span></a></li>
							<li onclick="selectTag('person_chpsd','842px','683px','selchpsd')"><a id="selchpsd" href="javascript:void(0)">修改密码<span class="padding1"></span></a></li>
							<li onclick="selectTag('person_chheadimg','985px','828px','selheadimg')"><a id="selheadimg" href="javascript:void(0)">修改头像<span class="padding1"></span></a></li>
						</ul>
					</div>
				</div>			
				<!-- 右部分_个人信息 -->
				<div id="person_info">
					<div class="person_info_list">
						<ul>
							<li>
								<div class="person_info_text">&nbsp;&nbsp;用户名:</div><span class="person_info_text3">AidanSu</span>
							</li>
							<li>
								<div class="person_info_text">&nbsp;&nbsp;&nbsp;&nbsp;昵称:</div><span class="person_info_text3">小苏</span>	
							</li>
							<li>
								<div class="person_info_text">&nbsp;&nbsp;&nbsp;&nbsp;性别:</div><span class="person_info_text3">男</span>
							</li>
							<li>
								<div class="person_info_text">手机号码:</div><span class="person_info_text3">155999966820</span>
							</li>
							<li>
								<div class="person_info_text">电子邮箱:</div><span class="person_info_text3">aidansu@163.com</span>
							</li>						
							<li>
								<div class="person_info_text">&nbsp;&nbsp;发布数:</div><span class="person_info_text3">20条</span>
							</li>
							<li>
								<div class="person_info_text">&nbsp;&nbsp;收藏数:</div><span class="person_info_text3">15条</span>
							</li>
							<li>
								<div class="person_info_text">注册时间:</div><span class="person_info_text3">2012年12月21日</span>
							</li>
						</ul>
					</div>					
					<div class="person_info_btn" onclick="selectTag('person_chinfo','985px','828px','selinfo')">				
						<div class="person_info_img"><img src="images/person_info.png"/></div>
						<div class="person_info_text2">修改信息</div>																
					</div>
				</div>		
				<!-- 右部分_发布信息 -->
				<div id="person_release">
					<div class="person_release_list release_content_1_2_2_1 " onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>			
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>						
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_list" onmousemove="myshow(this)" onmouseout="myhide(this)">
						<ul>
							<li class="person_release_list_title"><a href="#">[二手书]新生注意了，有便宜二手书!</a></li>
							<li class="person_release_list_setup"><a>详情</a>&nbsp;&nbsp;<a>编辑</a>&nbsp;&nbsp;<a>删除</a></li>
							<div class="clean"></div>
							<li class="person_release_list_state">发布时间:2012年09月20日<span class="person_color1"><b>[交易状态]</b></span></li>
						</ul>
					</div>					
					<div class="person_release_paging">
						<div class="person_release_fontpage">
							<a href="#">上一页</a>	
						</div>	
						<div class="person_release_page person_release_margin1" >
							<a href="#">1</a>	
						</div>
						<div class="person_release_nextpage">
							<a href="#">下一页</a>	
						</div>	
					</div>
				</div>			
				<!-- 右部分_修改信息 -->
				<div id="person_chinfo">
					<div class="person_chinfo_list">
						<form action="" id="chinfo" name="chinfo" method="post">
							<ul>
								<li>
									<div class="person_chinfo_text">&nbsp;&nbsp;用户名:</div>
									<input class="person_chinfo_input" type="text" name="username"/>
									<span class="size1"></span>
								</li>
								<li>
									<div class="person_chinfo_text">&nbsp;&nbsp;&nbsp;&nbsp;昵称:</div>
									<input class="person_chinfo_input" type="text" name="nickname"/>
									<span class="size1"></span>
								</li>
								<li>
									<div class="person_chinfo_text">&nbsp;&nbsp;&nbsp;&nbsp;性别:</div>
									<select class="chinfo_content_1_2_2_2_1" name="sex">
										<option value="nan">男</option>
										<option value="nv">女</option>				
									</select>
								</li>
								<li>
									<div class="person_chinfo_text">手机号码:</div>
									<input class="person_chinfo_input" type="text" name="phone"/>
									<span class="size1"></span>
								</li>
								<li>
									<div class="person_chinfo_text">电子邮箱:</div>
									<input class="person_chinfo_input" type="text" name="mail"/>
									<span class="size1"></span>
								</li>						
							</ul>							
							<span class="person_chinfo_btnhold">
								<input id="person_chinfo_submit" type="submit" name="submit" value=""/>
							</span>								
						</form>					
					</div>
				</div>		
				<!-- 右部分_修改密码 -->
				<div id="person_chpsd">	
					<div class="person_chpsd_list">
						<form action="" id="chpsd" name="chpsd" method="post">					
							<div class="person_chpsd_text3">
								<div class="person_chpsd_text">现在的密码&nbsp;:</div>
								<input id="currentpsd" class="person_chpsd_input" type="password" name="currentpsd"/>
								<span class="size1"></span>
							</div>					
							<div class="person_chpsd_text4">
								<div class="person_chpsd_text">设置新密码&nbsp;:</div>
								<input id="newpsd" class="person_chpsd_input" type="password" name="newpsd"/>
								<span class="size1"></span>
								<div class="clean"></div>
								<div class="person_chpsd_text2 ">/6-30字母、数字或下划线的组合</div>
							</div>								
							<div class="person_chpsd_text3">
								<div class="person_chpsd_text">重复新密码&nbsp;:</div>
								<input id="agnpsd" class="person_chpsd_input" type="password" name="agnpsd"/>
								<span class="size1"></span>
							</div>
							<div style="clear:both;"></div>
							<span class="person_chpsd_btnhold">
								<input id="person_chinfo_submit" type="submit" name="submit" value=""/>
							</span>		
						</form>					
					</div>
				</div>
				
				<!-- 右部分_修改头像 -->
				<div id="person_chheadimg">	
					<input type="button" class="person_chheadimg_btn" onclick = "clp();" value="本地照片"/>
					<input type="file" id="File" style="visibility:hidden;"/>
					<div class="person_chheadimg_text1">仅支持JPG、GIF、PNG,且文件小于5M</div>
				</div>
			</div>	
	</div>
<div>
<!-- 底部 -->
<div id="footer_holder">
	<div id="footer">
        <div id="footer_text">
            <ul>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">招聘信息</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            Copyright ©2013 版权所有 All Rights Reserved. 粤ICP备12003586号
        </div>
        <div id="weibo">
        	<a href="http://t.qq.com/nfhoujie" target="_blank" id="tencent">腾讯微博</a>
       		<a href="http://weibo.com/nfhoujie" target="_blank" id="sina">新浪微博</a>
    	</div>
    </div>
</div>
</body>
</html>
